<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .out {
            width: 700px;
            margin: 30px auto;
            font-size: 14px;
        }
        input {
            width: 100px;
            height: 12px;
        }
        button {
            font-size: 12px;

        }
        #detil {
            width: 500px;
            margin: auto;
            margin-top: 10px;
            text-align: center;
            border-collapse: collapse;

        }
        table, th, td {
            border: 2px solid black;
        }
    </style>
</head>
<body>
    <div class="out">
        <div class="header"> 
            按照价格查询<input type="text" class="start">&nbsp;- &nbsp;<input type="text" class="end">
            <button class="find">搜索</button>按照商品名称查询<input type="text" class="lookname">
            <button class="look">查询</button>
        </div>
            <table id="detil">
                <thead>
                    <tr>
                        <th>id</th>
                        <th>产品名称</th>
                        <th>价格</th>
                    </tr>
                </thead>
                <tbody>

                </tbody>
            </table>
    </div>
    <script>
        var data = [
            {
               id: 1,
               pname: '小米',
               price: 3000 
            },
            {
               id: 2,
               pname: '华为',
               price: 2000 
            },
            {
               id: 3,
               pname: '苹果',
               price: 4000 
            },
            {
               id: 4,
               pname: '三星',
               price: 6000 
            }
        ]
        var tbody = document.querySelector('tbody');
        var start = document.querySelector('.start');
        var end = document.querySelector('.end');
        var find = document.querySelector('.find');
        var look = document.querySelector('.look');
        var lookname = document.querySelector('.lookname');
        function add(shu) {
            shu.forEach(function(value, index) {
                var tr = document.createElement('tr');
                tr.innerHTML = '<td>' + value.id + '</td>' + '<td>' + value.pname + '</td>' + '<td>' + value.price + '</td>';
                tbody.appendChild(tr);
            })
        }
        function filters(satrt, end) {
            var newData = data.filter(function(value, index) {
                return value.price >= start.value && value.price <= end.value;
            })
            return newData;
        }
        function filters_byname(findname) {
            var newData = data.filter(function(value, index) {
                return value.pname == findname.value;
            })
            return newData;
        }
        find.addEventListener('click', function() {
            if(start.value =='' || end.value == '' ) {
                tbody.innerHTML = ""
                add(data);
            }else {
                var newData = filters(start, end);
                tbody.innerHTML = ""
                add(newData);
            }
        })
        look.addEventListener('click', function() {
            if(lookname.value =='') {
                tbody.innerHTML = ""
                add(data);
            }else {
                tbody.innerHTML = "";
                var newData = filters_byname(lookname)
                add(newData);
            }
        })
        add(data);
    </script>

</body>
</html>